import React, { useEffect } from "react";
import { Button, ButtonGroup, Container } from "react-bootstrap";
import ProductGridPannel from "../../layout/ProductGridPannel";
import { useLocation } from "react-router-dom";
import { Heart, HeartFill } from "react-bootstrap-icons";
import { PageHelper } from "../../../../helper";

interface ProductDetailProps{
    productName?:string;
    productDesc?:string,
    price?:number;
    discount?:number;
    flags?:Array<string>;
    isLike?:boolean
}

const ProductDetail:React.FC<ProductDetailProps> = (props?:ProductDetailProps)=> {
    
    const location = useLocation();

    useEffect(()=>{
        console.debug(`got product id ${(location.state||{}).productId}`);
        PageHelper.disableHtmlBodyScroll();
        return ()=> {
            PageHelper.rollbackHtmlBodyStyle();
        }
    },[props])


    return (<Container fluid style={{height:"100%"}}>
            <ProductGridPannel config={{items:[
                {
                    "original":require("../../../../resources/images/shoes.jpeg"),
                    "thumbnail":require("../../../../resources/images/shoes.jpeg"),
                },
                {
                    "original":require("../../../../resources/images/shoes-material.jpeg"),
                    "thumbnail":require("../../../../resources/images/shoes-material.jpeg"),
                }
            ]}}/>
        <Container fluid className="d-flex flex-column mt-2 align-items-start" style={{overflow:'scroll'}}>
            <h3>{props?.productName}</h3>
            <p>{">>>>>"}{props?.productDesc}&nbsp;{"sold out 200+"}</p>
            <div className="d-flex flex-row">
                <h6>Price:</h6>&nbsp;
                <p>{props?.price}</p>
            </div>
            <Container className="d-flex flex-row align-self-end justify-content-end m-0 p-0">
                {props?.isLike? <Heart/> : <HeartFill/>}
            </Container>
        </Container>
        <Container className="d-flex pe-4 flex-row justify-content-end" style={{position:"fixed",bottom:10}}>
            <ButtonGroup className="align-self-end">
                <Button variant="warning">Add to Cart</Button>
                <Button variant="danger">Buy it now</Button>
            </ButtonGroup>
        </Container>
    </Container>)
}

ProductDetail.defaultProps = {
    productName:"A lightgray comfortable Net surface shoes",
    productDesc:"Hotest.",
    price:200.5,
    discount:0.8,
    flags:["送运费险","收藏上千"],
    isLike:true
}

export default ProductDetail;